<template>
  <div style="float: left; margin: 0 .2rem; max-height: 5rem; overflow-y: auto; border-radius: 0.15rem;">
    <!-- <a-menu style="width: 2.56rem"
            mode="vertical"
            :defaultSelectedKeys="['1']">
      <a-menu-item v-for="(item, index) in mainList"
                   :key="(index+1).toString()"
                   :id="item.id"
                   @click="sendMsg(index)"
                   ref="myeventKey">
        <span class="span">{{item.type_name}}</span>
        <div type="text"
             v-show="$store.getters.getAllCount(item.id)"
             class="cricle">{{$store.getters.getAllCount(item.id)}}</div>
      </a-menu-item>
    </a-menu> -->
    <a-menu style="width: 2.56rem"
            mode="vertical"
            :defaultSelectedKeys="['1']">
      <a-menu-item v-for="(item, index) in newMenuList"
                   :key="(index+1).toString()"
                   :id="item.id"
                   @click="sendMsg(item.id)"
                   ref="myeventKey">
        <span class="span">{{item.title}}</span>
        <div type="text"
             v-show="$store.getters.getAllCount(item.id)"
             class="cricle">{{$store.getters.getAllCount(item.id)}}</div>
      </a-menu-item>
    </a-menu>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: '',
      localtime: '',
      currentTime1: '',
      newMenuList: [],
      menuList: [{
        id: 1,
        title: '早餐'
      }, {
        id: 2,
        title: '中餐'
      }, {
        id: 3,
        title: '晚餐'
      }]
    }
  },
  created () {
    // this.localTimeFun()
    this.serciceTime()
  },
  watch: {
    currentTime1 () {
      if (this.currentTime1 > '13:30' && this.currentTime1 < '19:00') {
        this.newMenuList = this.menuList.concat()
        this.newMenuList.splice(0, 2)
        this.$parent.getGoodsList(3)
      } else if (this.currentTime1 > '08:40' && this.currentTime1 <= '13:30') {
        this.newMenuList = this.menuList.concat()
        this.newMenuList.splice(0, 1)
        this.$parent.getGoodsList(2)
      } else {
        this.newMenuList = this.menuList.concat()
        this.$parent.getGoodsList(1)
      }
    }
  },
  methods: {
    sendMsg (index) {
      // this.msg = this.$refs.myeventKey[index].$el.id
      this.$emit('listenChild', index)
    },
    timeAdd0 (str) { // 时间不足补0
      if (str.length <= 1) {
        str = '0' + str
      }
      return str
    },
    localTimeFun () { // 获取本地时间
      let localHours = new Date().getHours().toString() // 时
      let localMin = new Date().getMinutes().toString() // 分
      this.localtime = this.timeAdd0(localHours) + ':' + this.timeAdd0(localMin)
      console.log(this.localtime)
    },
    serciceTime () { // 获取服务器时间
      let date = this.toLocaleString()
      date.then(function (datas) {
        let data = new Date(datas.body)
        let hour = this.addZero(data.getHours())
        let minutes = this.addZero(data.getMinutes())
        this.currentTime1 = hour + ':' + minutes
        console.log(this.currentTime1)
      })
    }
  },
  props: ['mainList']
}
</script>

<style lang="stylus" scoped>
@import '../../../../static/css/color.styl'
.ant-menu-item .anticon
  display none
.ant-menu-vertical .ant-menu-item
  color $color-gray
  position relative
  padding 0
  height 0.7rem
  margin-bottom 0
  .span
    display inline-block
    font-size 0.26rem
    width 80%
    overflow hidden
    text-overflow ellipsis
    white-space nowrap
.cricle
  width 0.28rem
  height 0.28rem
  background-color $color-main
  border-radius 50%
  float right
  margin-top 0.1rem
  text-align center
  line-height 0.28rem
  color $color-white
  display inline
.ant-menu
  border-radius 0.15rem
.ant-menu-root.ant-menu-vertical
  border-right none
  padding 0.3rem
.ant-menu-item-selected
  color $color-main
.ant-menu-item:hover
  color $color-main
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected
  background none
  color #27ae9e
</style>
